import React, { useEffect, useState } from 'react'
import { Tabs, Form, Spin } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import Basic from './basic'
import AuthView from './auth'
import SettleView from './settle'
import Account from './account'
import request from '@/utils/request'
import moment from 'moment'
import { history } from 'umi'

const { TabPane } = Tabs
const paneStyle = { outline: "none", backgroundColor: "white", paddingTop: "20px" }
export default (props: any) => {
    const { location, match } = props
    const { params: { storeId } } = match
    console.log(location)

    const [basicForm] = Form.useForm()
    const [authForm] = Form.useForm()
    const [settleForm] = Form.useForm()

    const [types, setTypes] = useState({
        settle_account_type: 1,
        apply_type: 1
    })

    const [loading, setLoading] = useState(false)

    useEffect(() => {
        setLoading(true)
        request(`/store/detail/${storeId}`).then((result) => {
            console.log('loading');
            const { code, data: { basic: baseData, enterprise, finance, personal } } = result
            if (code === 200) {
                if (baseData.logo) {
                    baseData.logo = [{
                        uid: new Date().getTime(),
                        name: baseData.logo.substr(-15, 15),
                        url: baseData.logo
                    }];
                }
                if (baseData.banner) {
                    baseData.banner = [{
                        uid: new Date().getTime(),
                        name: baseData.banner.substr(-15, 15),
                        url: baseData.banner
                    }];
                }
                basicForm.setFieldsValue({
                    title: baseData.title,
                    expired_at: moment(baseData.expired_at, 'YYYY/MM/DD'),
                    is_own: baseData.is_own,
                    industry_id: baseData.industry_id,
                    level_id: baseData.level_id,
                    enable: baseData.enable,
                    sort: baseData.sort,
                    logo: baseData.logo ?? [],
                    banner: baseData.banner ?? [],
                    keyword: baseData.keyword,
                    introduce: baseData.introduce,
                    telephone: baseData.telephone,
                    is_recommend: baseData.is_recommend,
                    service_types: baseData.service_types,
                })
                if (baseData.apply_type == 1) {
                    if (personal.id_card_front) {
                        personal.id_card_front = [{
                            uid: new Date().getTime(),
                            name: personal.id_card_front.substr(-15, 15),
                            url: personal.id_card_front
                        }];
                    }
                    if (personal.id_card_back) {
                        personal.id_card_back = [{
                            uid: new Date().getTime(),
                            name: personal.id_card_back.substr(-15, 15),
                            url: personal.id_card_back
                        }];
                    }
                    authForm.setFieldsValue(personal)
                } else if (baseData.apply_type == 2) {
                    if (enterprise.law_id_card_front) {
                        enterprise.law_id_card_front = [{
                            uid: new Date().getTime(),
                            name: enterprise.law_id_card_front.substr(-15, 15),
                            url: enterprise.law_id_card_front
                        }];
                    }
                    if (enterprise.law_id_card_back) {
                        enterprise.law_id_card_back = [{
                            uid: new Date().getTime(),
                            name: enterprise.law_id_card_back.substr(-15, 15),
                            url: enterprise.law_id_card_back
                        }];
                    }
                    authForm.setFieldsValue(enterprise)
                }
                setTypes({
                    apply_type: baseData.apply_type,
                    settle_account_type: finance.settle_account_type
                })
                settleForm.setFieldsValue(finance)
                setLoading(false)

            }
        })
    }, [])

    const close = () => {
        history.push('/store/list', { current: location.state.current })
    }
    return (
        <PageHeaderWrapper title={false}>
            <Spin spinning={loading} size="large">
                <Tabs defaultActiveKey="1">
                    <TabPane tab="基本信息" key="1" style={paneStyle} forceRender={true}>
                        <Basic form={basicForm} close={close} id={storeId} />
                    </TabPane>
                    <TabPane tab="认证信息" key="2" style={paneStyle} forceRender={true}>
                        <AuthView form={authForm} apply_type={types.apply_type} id={storeId} close={close} />
                    </TabPane>
                    <TabPane tab="结算账户" key="3" style={paneStyle} forceRender={true}>
                        <SettleView form={settleForm} types={types} setTypes={(types: any) => {
                            setTypes(types)
                        }} id={storeId} close={close} />
                    </TabPane>
                    <TabPane tab="账户信息" key="4" style={{ outline: "none" }} forceRender={true}>
                        <Account />
                    </TabPane>
                </Tabs >
            </Spin>
        </PageHeaderWrapper>
    )
}